<!--
 * @Date: 2024-07-15 10:10:45
 * @LastEditors: 陈俊宇 467724386@qq.com
 * @LastEditTime: 2024-07-25 10:34:38
-->
<template>
    <div class="evaluate-container">
        <div class="evaluate">
            <el-icon class="close" @click="emit('close')"><Close /></el-icon>

            <div class="title">Please comment on this service to help us improve.</div>

            <el-rate v-model="state.rate" size="large" />

            <el-input
                v-model="state.textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                placeholder="Please input"
                :maxlength="200"
                show-word-limit
                class="input"
            />

            <el-button type="primary" class="btn" @click="send">Send</el-button>
        </div>
    </div>
</template>

<script setup>
import { Close } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['evaluate'])

const state = reactive({
    rate: 0,
    textarea: '',
})

const send = () => {
    if (state.rate === 0) {
        ElMessage.warning('Please select a rating first.')
    } else {
        emit('evaluate', {
            rate: state.rate,
            textarea: state.textarea,
        })
    }
}
</script>

<style lang="scss" scoped>
.evaluate-container {
    width: 880px;
    height: 680px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba($color: #000000, $alpha: 0.3);
    border-radius: 10px;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;

    .evaluate {
        width: 480px;
        height: 244px;
        background: #ffffff;
        border-radius: 4px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 40px;
        font-size: 14px;
        color: #000000;

        .close {
            position: absolute;
            color: #999;
            right: 6px;
            top: 6px;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.5s ease;
            &:hover {
                transform: scale(1.2);
            }
        }

        .title {
            margin-bottom: 8px;
        }

        .input {
            margin: 8px 0 16px;
        }

        .btn {
            width: 100px;
            min-height: 40px !important;
        }
    }
}
</style>
